<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品分类管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../plugins/select2/select2.css"/>
    <link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css"/>
    <script src="../plugins/select2/select2.min.js" type="text/javascript"></script>

    <!--引入host文件中配置的域名   这是一个自定义的文件-->
    <script src="../js/pages/public.js"></script><!--注意：这个文件必须放在jquery文件的下面   由于有一个执行先后顺序的时机-->

</head>

<body class="hold-transition skin-red sidebar-mini">
<!-- .box-body -->

<div class="box-header with-border">
    <h3 class="box-title">商品分类管理
    </h3>
</div>

<div class="box-body">
    <ol class="breadcrumb">
        <li>
            <a href="#">顶级分类列表</a>
        </li>
        <li>
            <a href="#">珠宝</a>
        </li>
        <li>
            <a href="#">银饰</a>
        </li>
    </ol>

    <!-- 数据表格 -->
    <div class="table-box">

        <!--工具栏-->
        <div class="pull-left">
            <div class="form-group form-inline">
                <div class="btn-group">
                    <button type="button" class="btn btn-default" title="新建" data-toggle="modal"
                            data-target="#editModal"><i class="fa fa-file-o"></i> 新建
                    </button>
                    <button type="button" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button>
                    <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload()"><i class="fa fa-check"></i> 刷新</button>
                    <button type="button" class="btn btn-default" onclick="LoadParentIdAndPage(0)" title="返回"><i
                            class="fa fa-check"></i> 返回最上一级
                    </button>

                    <select id="one" onchange="getTwo(this.value)"></select>
                    <select id="two" onchange="getThree(this.value)"></select>
                    <select id="three"></select>
                </div>
            </div>
        </div>


        <!--数据列表-->
        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
            <thead>
            <tr>
                <th class="" style="padding-right:0px">
                    <input type="checkbox" class="icheckbox_square-blue">
                </th>
                <th class="sorting_asc">分类ID</th>
                <th class="sorting">分类名称</th>
                <th class="sorting">类型模板ID</th>

                <th class="text-center">操作</th>
            </tr>
            </thead>
            <tbody id="pageList">
            <!--            <tr>-->
            <!--                <td><input type="checkbox"></td>-->
            <!--                <td>982</td>-->
            <!--                <td>吊坠/项链</td>-->
            <!--                <td>-->
            <!--                    11-->
            <!--                </td>-->
            <!--                <td class="text-center">-->
            <!--                    <button type="button" class="btn bg-olive btn-xs">查询下级</button>-->
            <!--                    <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal">修改-->
            <!--                    </button>-->
            <!--                </td>-->
            <!--            </tr>-->
            <!--            <tr>-->
            <!--                <td><input type="checkbox"></td>-->
            <!--                <td>983</td>-->
            <!--                <td>手镯/手链/脚链</td>-->
            <!--                <td>-->
            <!--                    11-->
            <!--                </td>-->
            <!--                <td class="text-center">-->
            <!--                    <button type="button" class="btn bg-olive btn-xs">查询下级</button>-->
            <!--                    <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal">修改-->
            <!--                    </button>-->
            <!--                </td>-->
            <!--            </tr>-->
            <!--            <tr>-->
            <!--                <td><input type="checkbox"></td>-->
            <!--                <td>984</td>-->
            <!--                <td>戒指/耳饰</td>-->
            <!--                <td>-->
            <!--                    11-->
            <!--                </td>-->
            <!--                <td class="text-center">-->
            <!--                    <button type="button" class="btn bg-olive btn-xs">查询下级</button>-->
            <!--                    <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal">修改-->
            <!--                    </button>-->
            <!--                </td>-->
            <!--            </tr>-->
            </tbody>
        </table>
        <!--数据列表/-->

    </div>
    <!-- 数据表格 /-->
    <form id="indexForm">
        <input type="hidden" id="parentId" name="parentid">
        <a href="javascript:toPage(3)">首页</a>
        <a href="javascript:toPage(1)">上一页</a>
        <a href="javascript:toPage(2)">下一页</a>
        <a href="javascript:toPage(4)">尾页</a>
        第<input type="text" name="pageNum" id="pageNum" size="1px" readonly="readonly">页
        共<input type="text" name="pages" id="pages" size="1px" disabled="disabled">页
        共<input type="text" name="total" id="total" size="1px" disabled="disabled">条
    </form>

</div>
<!-- /.box-body -->


<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">商品分类编辑</h3>
            </div>
            <div class="modal-body">
                <form id="InForm">
                    <input type="hidden" id="InparenId" name="parentId">
                    <table class="table table-bordered table-striped" width="800px">
                        <tr>
                            <td>上级商品分类</td>
                            <td>
                                珠宝 >> 银饰
                            </td>
                        </tr>
                        <tr>
                            <td>商品分类名称</td>
                            <td><input class="form-control" name="name" placeholder="商品分类名称"></td>
                        </tr>
                        <tr>
                            <td>类型模板</td>
                            <td>
                                <select id="typeID" name="typeId" style="width: 100%"></select>
                            </td>
                        </tr>
                    </table>
                </form>

            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="InsertItem()">保存
                </button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>

<!--修改窗口-->
<div class="modal fade" id="updateeditModal" tabindex="-1" role="dialog" aria-labelledby="updatemyModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="updatemyModalLabel">商品分类编辑</h3>
            </div>
            <div class="modal-body">

                <form id="UpFrom">

                    <table class="table table-bordered table-striped" width="800px">
                        <tr>
                            <td>上级商品分类</td>
                            <td>
                                珠宝 >> 银饰
                            </td>
                        </tr>
                        <tr>
                            <td>商品分类名称</td>
                            <td><input class="form-control" placeholder="商品分类名称"></td>
                        </tr>
                        <tr>
                            <td>类型模板</td>
                            <td>
                                <select id="UtyoeId" name="typeId" style="width: 100%"></select>
                            </td>
                        </tr>
                    </table>
                </form>

            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" aria-hidden="true">保存</button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>
</body>
<script th:inline="javascript">
    $(function () {
        getOne();
        LoadParentIdAndPage(0);
        getInsertAndType()
    })

    //一级联动
    function getOne() {
        $.ajax({
            url: domain + "/itemcat/getItemCatByParentId",
            headers: {'Autherizetion': window.localStorage.getItem("token")},//获取浏览器缓存中的token进行过滤器放过
            contentType: "application/json;charset=utf-8",//我将来要往前台发送数据的时候是以json的格式发送的
            dataType: "json",
            type: "get",//必须指定请求类型
            data: {parentId: 0},//往后台发送的确确实实是一个json数据  JSON.stringify({})
            success: function (result) {
                if (result.code == 11) {
                    // console.log(result)
                    var data = result.data;
                    var html = "<option>--请选择--</option>";
                    for (let i = 0; i < data.length; i++) {
                        html += "<option value='" + data[i].id + "'>" + data[i].name + "</option>";
                    }
                    $("#one").html(html)
                    $("#two").html("<option>--请选择--</option>")
                    $("#three").html("<option>--请选择--</option>")
                } else if (result.code == 12) {
                    top.window.location.href = "../login.html";//token失效 跳转回登录界面  重新登录生成token  放进缓存  重新获取
                }
            }, error: function () {
                alert("分类管理查询失败")
            }
        })
    }

    //二级联动
    function getTwo(parentId2) {
        $.ajax({
            url: domain + "/itemcat/getItemCatByParentId",
            headers: {'Autherizetion': window.localStorage.getItem("token")},//获取浏览器缓存中的token进行过滤器放过
            contentType: "application/json;charset=utf-8",//我将来要往前台发送数据的时候是以json的格式发送的
            dataType: "json",
            type: "get",//必须指定请求类型
            data: {parentId: parentId2},//往后台发送的确确实实是一个json数据  JSON.stringify({})
            success: function (result) {
                if (result.code == 11) {
                    // console.log(result)
                    var data = result.data;
                    var html1 = "<option>--请选择--</option>";
                    for (let i = 0; i < data.length; i++) {
                        html1 += "<option value='" + data[i].id + "'>" + data[i].name + "</option>";
                    }
                    $("#two").html(html1)
                    $("#three").html("<option>--请选择--</option>")
                } else if (result.code == 12) {
                    top.window.location.href = "../login.html";//token失效 跳转回登录界面  重新登录生成token  放进缓存  重新获取
                }
            }, error: function () {
                alert("分类管理查询失败")
            }
        })
    }

    //三级联动
    function getThree(parentId3) {
        $.ajax({
            url: domain + "/itemcat/getItemCatByParentId",
            headers: {'Autherizetion': window.localStorage.getItem("token")},//获取浏览器缓存中的token进行过滤器放过
            contentType: "application/json;charset=utf-8",//我将来要往前台发送数据的时候是以json的格式发送的
            dataType: "json",
            type: "get",//必须指定请求类型
            data: {parentId: parentId3},//往后台发送的确确实实是一个json数据  JSON.stringify({})
            success: function (result) {
                if (result.code == 11) {
                    // console.log(result)
                    var data = result.data;
                    var html2 = "<option>--请选择--</option>";
                    for (let i = 0; i < data.length; i++) {
                        html2 += "<option value='" + data[i].id + "'>" + data[i].name + "</option>";
                    }
                    $("#three").html(html2)
                } else if (result.code == 12) {
                    top.window.location.href = "../login.html";//token失效 跳转回登录界面  重新登录生成token  放进缓存  重新获取
                }
            }, error: function () {
                alert("分类管理查询失败")
            }
        })
    }//直接将查询出来  首先父id给0   然后点击查询下级的时候  直接将当前id传过去即可   e.id


    //----------------------------------------------------查询下级按钮----------------------------------------------------------
    function LoadParentIdAndPage(parentId1) {
        $("#InparenId").val(parentId1);//增加获取当前页面的父id进行增加
        $("#parentId").val(parentId1);
        $.ajax({
            url: domain + "/itemcat/getItemParentAndPage",
            headers: {'Autherizetion': window.localStorage.getItem("token")},//获取浏览器缓存中的token进行过滤器放过
            // contentType: "application/json;charset=utf-8",//我将来要往前台发送数据的时候是以json的格式发送的
            dataType: "json",
            type: "post",//必须指定请求类型
            data: $("#indexForm").serialize(),//往后台发送的确确实实是一个json数据  JSON.stringify({})
            success: function (result) {
                if (result.code == 11) {
                    // console.log(result)
                    var data = result.data.rows;
                    var html = "";
                    $(data).each(function (i, e) {
                        html += "<tr>\n" +
                            "                <td><input type=\"checkbox\"></td>\n" +
                            "                <td>" + e.id + "</td>\n" +
                            "                <td>" + e.name + "</td>\n" +
                            "                <td>\n" +
                            "                    " + e.typeId + "\n" +
                            "                </td>\n" +
                            "                <td class=\"text-center\">\n" +
                            "                    <button type=\"button\" onclick='LoadParentIdAndPage(" + e.id + ")' class=\"btn bg-olive btn-xs\">查询下级</button>\n" +
                            "                    <button type=\"button\" class=\"btn bg-olive btn-xs\" onclick='toUpdate(" + e.id + ")' data-toggle=\"modal\" data-target=\"#updateeditModal\">修改\n" +
                            "                    </button>\n" +
                            "                </td>\n" +
                            "            </tr>";
                    })
                    $("#pageList").html(html)
                    $("#pageNum").val(result.data.pageNum)
                    $("#pages").val(result.data.pages)
                    $("#total").val(result.data.total)
                } else if (result.code == 12) {
                    top.window.location.href = "../login.html";//token失效 跳转回登录界面  重新登录生成token  放进缓存  重新获取
                }
            }, error: function () {
                alert("分类管理查询失败")
            }
        })
    }

    /*分页*/
    function toPage(id) {
        var pageNum = parseInt($("#pageNum").val());
        var pages = parseInt($("#pages").val());
        if (id == 1) {
            if (pageNum <= 1) {
                alert("已是首页");
                return;
            }
            $("#pageNum").val(pageNum - 1);
        } else if (id == 2) {
            if (pageNum >= pages) {
                alert("已是尾页");
                return;
            }
            $("#pageNum").val(pageNum + 1);
        } else if (id == 3) {
            $("#pageNum").val(1);
        } else if (id == 4) {
            $("#pageNum").val(pages);
        }
        LoadParentIdAndPage();
    }

    function getInsertAndType() {
        $.ajax({
            url: domain + "/itemcat/getInsertAndTypeId",
            headers: {"Autherizetion": window.localStorage.getItem("token")},//获取登录的token 进入全局过滤器即可成功通过请求
            // contentType: "application/json;charset=utf-8",//我将来要往前台发送数据的时候是以json的格式发送的  匹配RequestBody注解
            dataType: "json",
            type: "get",
            // data:JSON.stringify({}),
            success: function (result) {
                if (result.code == 11) {
                    // console.log(result)
                    //拼接
                    var html = '';

                    $(result.data).each(function (i, e) {
                        html += '<option name="typeId" value="' + e.id + '">' + e.name + '</option>';
                    })
                    $("#typeID").html(html)
                    $("#typeID").select2()
                } else if (result.code == 12) {
                    top.window.location.href = "../login.html";//token失效   重新登录获取token
                }
            }, error: function () {
                alert("增加页面回显 模板 失败")
            }
        })
    }


    function InsertItem() {
        var Inform = $("#InForm").serializeObject();
        console.log(Inform)
        $.ajax({
            url: domain + "/itemcat/InsertItemCat",
            headers: {"Autherizetion": window.localStorage.getItem("token")},//获取登录的token 进入全局过滤器即可成功通过请求
            contentType: "application/json;charset=utf-8",//我将来要往前台发送数据的时候是以json的格式发送的
            dataType: "json",
            type: "post",//必须指定请求类型
            data: JSON.stringify(Inform),//往后台发送的确确实实是一个json数据   JSON.stringify({})
            success: function (result) {
                if (result.code == 11) {//操作成功
                    alert("增加成功")
                    location.reload();
                } else if (result.code == 12) {//这个状态是全局过滤器给我们返回的
                    top.window.location.href = "../login.html";//token失效 重新登录
                }
            }, error: function () {
                alert("增加异常，请联系管理员")
            }
        })
    }

    function toUpdate(id) {
        console.log(id)
        $.ajax({
            url: domain + "/itemcat/getItemCatById",
            headers: {"Autherizetion": window.localStorage.getItem("token")},//获取登录的token 进入全局过滤器即可成功通过请求
            dataType: "json",
            type: "get",//必须指定请求类型
            // contentType: "application/json;cahrset=utf-8",//往后台发送的确确实实是一个json数据   JSON.stringify({})
            data: {id: id},//往后台发送的确确实实是一个json数据   JSON.stringify({})
            success: function (result) {
                if (result.code == 11) {
                    console.log(result)//查询成功进行回显

                    // var html = '';
                    //
                    // $(result.data).each(function (i, e) {
                    //     html += '<option name="typeId" value="' + e.id + '">' + e.name + '</option>';
                    // })
                    // $("#typeID").html(html)
                    $("#UtyoeId").select2()
                    $("#UtyoeId").val(result.data.typeId).trigger("change")
                } else if (result.code == 12) {
                    top.window.location.href = "../login.html";//token失效  跳转登录界面  重新登录   加top可以打开一个全新的登录界面
                }
            }
        })
    }
</script>
</html>